<template>
  <div class="welcome-container">
    <div class="header">
      <h1>🎉 欢迎信息 🎉</h1>
      <div class="time-info">
        <span class="date">{{ data.time }}</span>
        <span class="week">{{ data.week }}</span>
      </div>
    </div>

    <div class="dashboard">
      <!-- 位置信息卡片 -->
      <div class="info-card location-card">
        <div class="card-title">
          <i class="icon-location"></i>
          <h3>访问位置</h3>
        </div>
        <div class="card-content">
          <p class="location">
            欢迎来自 <span class="low">{{ data.location }}</span> 的小伙伴。
            {{ getTimePeriodEnhanced(data.time) }}
          </p>
        </div>
      </div>

      <!-- 设备信息卡片 -->
      <div class="info-card device-card">
        <div class="card-title">
          <i class="icon-device"></i>
          <h3>设备信息</h3>
        </div>
        <div class="card-content">
          <div class="info-row">
            <label>浏览器</label>
            <span class="browser">{{ data.browser }} {{ data.browser_ver }}</span>
          </div>
          <div class="info-row">
            <label>系统</label>
            <span class="system">{{ data.system }}</span>
          </div>
        </div>
      </div>

      <!-- 天气信息卡片 -->
      <div class="info-card weather-card">
        <div class="card-title">
          <i class="icon-weather"></i>
          <h3>实时天气</h3>
        </div>
        <div class="card-content">
          <div class="weather-main">
            <div class="temperature">
              <span class="low">{{ data.low }}</span>
              <span class="separator">/</span>
              <span class="high">{{ data.high }}</span>
            </div>
            <div class="weather-detail">
              <span class="condition">{{ data.tq }}</span>
              <span class="wind">{{ data.fl }} {{ data.fengxiang }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="data.tip && data.tip !== '-'" class="notification">
      <i class="icon-info"></i>
      <p>{{ data.tip }}</p>
    </div>
  </div>
</template>

<script setup>
  const axios = inject('axios');
  const data = ref({
    success: true,
    time: '2025-04-05 14:33:37',
    week: '星期六',
    ip: '2408:8256:3311:e9c0:d528:25f7:6cb7:ee05',
    location: '广东省-深圳市',
    browser: 'Chrome',
    browser_ver: '134.0.0.0',
    system: 'Windows 10',
    low: '16°C',
    high: '23°C',
    tq: '小雨',
    fl: '1-3级',
    tip: '-',
    fengxiang: '微风',
  });
  const getPosition = async () => {
    const response = await axios.get('https://api.vvhan.com/api/visitor.info');
    data.value = response.data;
  };

  const getTimePeriodEnhanced = (timeStr) => {
    try {
      if (!/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(timeStr)) {
        throw new Error('时间格式错误，需要 YYYY-MM-DD HH:mm:ss 格式');
      }

      const [, timePart] = timeStr.split(' ');
      const [hours] = timePart.split(':');
      const hour = parseInt(hours, 10);

      if (isNaN(hour)) throw new Error('无法解析小时');
      if (hour < 0 || hour > 23) throw new Error('小时值无效');

      return hour >= 6 && hour < 9
        ? '早上好，早餐时间到，不要忘记吃早餐哦！🏠'
        : hour >= 9 && hour < 12
          ? '中午好，做点自己喜欢的事情吧！✍️'
          : hour >= 12 && hour < 18
            ? '下午好，下午茶时间到！🍟'
            : '晚上好，夜生活嗨起来！🚀';
    } catch (error) {
      console.warn(`时间解析失败: ${error.message}`);
      return '未知时段';
    }
  };
  onMounted(() => {
    getPosition();
  });
</script>

<style scoped>
  .welcome-container {
    max-width: 800px;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(245, 248, 255, 0.9) 0%, rgba(240, 242, 255, 0.9) 100%);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .header {
    text-align: center;
    margin-bottom: 10px;
  }

  .header h1 {
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
  }

  .time-info {
    display: flex;
    justify-content: center;
    gap: 1rem;
    color: #6b7280;
    font-size: 0.95rem;
  }

  .dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  .info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 15px;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
  }

  .info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  }

  .card-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .card-title h3 {
    color: #4b5563;
    font-size: 1.1rem;
    margin: 0;
  }

  [class^='icon-'] {
    width: 24px;
    height: 24px;
    background-size: contain;
  }

  .icon-location {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234b5563"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>');
  }
  .icon-device {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234b5563"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 15H6V6h5v12zm7 0h-5V6h5v12z"/></svg>');
  }
  .icon-weather {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234b5563"><path d="M6 16h12c1.1 0 2-.9 2-2s-.9-2-2-2h-2.2c-.4-1.2-1.5-2-2.8-2s-2.4.8-2.8 2H6c-1.1 0-2 .9-2 2s.9 2 2 2zM19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>');
  }

  .ip-address {
    color: #3b82f6;
    word-break: break-all;
    font-weight: 500;
  }

  .location {
    color: #4b5563;
    margin-top: 0.5rem;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .info-row:last-child {
    border-bottom: none;
  }

  label {
    color: #6b7280;
    font-size: 0.9rem;
  }

  .weather-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .temperature {
    font-size: 1.4rem;
    color: #2c3e50;
  }

  .low {
    color: #3b82f6;
  }
  .high {
    color: #ef4444;
  }
  .separator {
    color: #d1d5db;
    margin: 0 0.3rem;
  }

  .weather-detail {
    text-align: right;
  }

  .condition {
    display: block;
    color: #4b5563;
  }

  .wind {
    font-size: 0.9rem;
    color: #6b7280;
  }

  .notification {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(239, 246, 255, 0.9);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-left: 4px solid #3b82f6;
  }

  @media (max-width: 768px) {
    .welcome-container {
      margin: 1rem;
      padding: 1.5rem;
    }

    .dashboard {
      grid-template-columns: 1fr;
    }

    .weather-main {
      flex-direction: column;
      align-items: flex-start;
    }
  }
</style>
